<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

<body>
    <canvas id="app"></canvas>

    <script>
        var $app = new Easycanvas.Painter({
            el: '#app',
            fullScreen: true,
            webgl: {
                singleShader: true, // TODO
            },
            events: {
                touchmove: function (e) {
                    mouseX = e.canvasX;
                    mouseY = e.canvasY;
                },
            }
        });

        var mouseX = 200;
        var mouseY = 200;

        function createEffect () {
            var $effect = $app.add({
                style: {
                    left: Easycanvas.Transition.pendulum(
                        mouseX + 5 - Math.random() * 10,
                        mouseX - 100 - Math.random() * 400,
                        3000
                    ).loop(),
                    top: Easycanvas.Transition.ease(
                        mouseY,
                        mouseY - 200,
                        1000
                    ),
                    zIndex: Math.random(),
                },
                webgl: window.Easycanvas.webglShapes.custom({
                    vertices: [0, 0, 0],
                    colors: [
                        255, Math.random() * 128, 0, 255,
                    ],
                    pointSizes: new Float32Array([10]),
                    primitive: 0, // points
                    hasAlpha: true,
                }),
                hooks: {
                    ticked: function () {
                        this.webgl.pointSizes[0] += 2;
                        this.updateWebglStyle('pointSizes');

                        if (this.webgl.colors[3] > 4) {
                            this.webgl.colors[3] -= 4;
                            this.updateWebglStyle('colors');
                        } else {
                            this.remove();
                        }
                    }
                }
            });
        }

        $app.on('ticked', createEffect, 50);

        $app.start();
    </script>
</body>

